<!DOCTYPE html>
{% extends "base.html" %}

{% block title %}
{% endblock %}

{% block head %}
    <style>
        #dp_00,
        #dp_10,
        #po_00,
        #po_10,
        #do_00,
        #od_00{
            display: none;
            width: 600px;
            height:400px;
        }
         #dp_01,
         #dp_11,
         #po_01,
         #po_11,
         #do_01,
         #od_01{
            display: none;
            width: 600px;
            height:400px;
        }
         #fix{
             margin-left: auto;
             margin-right: auto;
             width: 1500px;
             height: 780px;
             max-width: max-content;
         }
    .layui-card-header{
        font-weight: bold;
    }
    </style>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
{% endblock %}

{% block content %}

    <div id="fix">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>人员统计</legend>
    </fieldset>
    <div style="padding: 20px; background-color: #F2F2F2;">
          <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-header">
                        各部门人员数量统计
                        
                    </div>
                    <div class="layui-card-body" id="department_person_0">
                        <div class="layui-tab">
                          <ul class="layui-tab-title">
                            <li class="pie_tab" onclick=load_pie("dp_00",1)>饼状图</li>
                            <li class="bar_tab" onclick=load_bar("dp_01")>柱状图</li>
                          </ul>
                        </div>
{#                        图放置的div#}
                        <div id="dp_00">

                        </div>
                         <div id="dp_01">

                        </div>
                    </div>

                  </div>
                </div>
                <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-header">人员订阅刊物数量统计</div>
                    <div class="layui-card-body" id="person_order_0">
                        <div class="layui-tab">
                          <ul class="layui-tab-title">
                            <li class="pie_tab" onclick=load_pie("po_00",1)>饼状图</li>
                            <li class="bar_tab" onclick=load_bar("po_01")>柱状图</li>
                          </ul>
                        </div>
{#                        图放置的div#}
                        <div id="po_00">

                        </div>
                         <div id="po_01">

                        </div>
                    </div>
                  </div>
                </div>
          </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>部门统计</legend>
    </fieldset>
    <div style="padding: 20px; background-color: #F2F2F2;">
          <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-header">各部门人员数量统计</div>
                    <div class="layui-card-body" id="department_person_1">
                        <div class="layui-tab">
                          <ul class="layui-tab-title">
                            <li class="pie_tab" onclick=load_pie("dp_10",1)>饼状图</li>
                            <li class="bar_tab" onclick=load_bar("dp_11")>柱状图</li>
                          </ul>
                        </div>
{#                        图放置的div#}
                        <div id="dp_10">

                        </div>
                        <div id="dp_11">

                        </div>
                    </div>
                  </div>
                </div>
                <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-header">各部门订阅刊物种类统计</div>
                    <div class="layui-card-body" id="order_department_0">
                        <div class="layui-tab">
                          <ul class="layui-tab-title">
                            <li class="pie_tab" onclick=load_pie("od_00",1)>饼状图</li>
                            <li class="bar_tab" onclick=load_bar("od_01")>柱状图</li>
                          </ul>
                        </div>
{#                        图放置的div#}
                        <div id="od_00">

                        </div>
                         <div id="od_01">

                        </div>
                    </div>
                  </div>
                </div>
          </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>订阅统计</legend>
    </fieldset>
    <div style="padding: 20px; background-color: #F2F2F2;">
          <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-header">人员订阅刊物数量统计</div>
                    <div class="layui-card-body" id="person_order_1">
                        <div class="layui-tab">
                          <ul class="layui-tab-title">
                            <li class="pie_tab" onclick=load_pie("po_10",1)>饼状图</li>
                            <li class="bar_tab" onclick=load_bar("po_11")>柱状图</li>
                          </ul>
                        </div>
{#                        图放置的div#}
                        <div id="po_10">

                        </div>
                        <div id="po_11">

                        </div>
                    </div>
                  </div>
                </div>
                <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-header">订阅各刊物的部门数量统计</div>
                    <div class="layui-card-body" id="department_order_0">
                        <div class="layui-tab">
                          <ul class="layui-tab-title">
                            <li class="pie_tab" onclick=load_pie("do_00",1)>饼状图</li>
                            <li class="bar_tab" onclick=load_bar("do_01")>柱状图</li>
                          </ul>
                        </div>
{#                        饼状图放置的div#}
                        <div id="do_00">

                        </div>
{#                        柱状图放置的div#}
                        <div id="do_01">

                        </div>
                    </div>
                  </div>
                </div>
          </div>
    </div>
    <div class="layui-footer layui-anim layui-anim-scale">
        <!-- 底部固定区域 -->
        <div class="layui-btn-container", id="operate_list" style="">
            <button id="export_button" class="layui-btn layui-btn-warm" onclick= export_statistics()  ><span class="layui-icon">&#xe67d;</span>导出</button>
        </div>
    </div>
    <div style="display: none" id="export_data">
         <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>选择导出内容</legend>
         </fieldset>
        <form class="layui-form" id="book" method="post" lay-filter="example">
            <div id="trans_data" style="text-align: center; padding: 20px">

            </div>
        </form>
    </div>
    </div>

{% endblock %}

{% block script %}

    <script src="../static/echarts.min.js"></script>
    <script src="../static/jquery-3.5.1.min.js"></script>
    <script src="../static/layui/layui.all.js" charset="UTF-8"></script>
    <script>

        var myChart;
        var option = {};
        var tab_status = [{index:'dp_00', status:'0', next:'1'},
                          {index:'dp_01', status:'0', next:'0'},
                          {index:'dp_10', status:'0', next:'3'},
                          {index:'dp_11', status:'0', next:'2'},
                          {index:'po_00', status:'0', next:'5'},
                          {index:'po_01', status:'0', next:'4'},
                          {index:'po_10', status:'0', next:'7'},
                          {index:'po_11', status:'0', next:'6'},
                          {index:'do_00', status:'0', next:'9'},
                          {index:'do_01', status:'0', next:'8'},
                          {index:'od_00', status:'0', next:'11'},
                          {index:'od_01', status:'0', next:'10'}];

        var statistics_data = [{'title': '各部门人员数量统计', 'value': '{{ url_for('main_api.get_department_person_statistics') }}'},
                               {'title': '人员订阅刊物数量统计', 'value': '{{ url_for('main_api.get_person_order_statistics') }}'},
                               {'title': '各部门订阅刊物种类统计', 'value': '{{ url_for('main_api.get_order_department_statistics') }}'},
                               {'title': '订阅各刊物的部门数量统计', 'value': '{{ url_for('main_api.get_department_order_statistics') }}'}];

        var complete_flag = true;

        $('.pie_tab').addClass('layui-this');

        $('#statistics').addClass('layui-this');

        layui.use(['transfer'], function () {
            var transfer = layui.transfer;
            transfer.render({
                elem: '#trans_data'
                ,title: ['所有统计表', '导出统计表']
                ,width: 225
                ,data: statistics_data
                ,id: 'export_area' //定义唯一索引
            })
        })

        load_pie('dp', 0);
        load_pie('po', 0);
        load_pie('do', 0);
        load_pie('od', 0);

        var url;

        function export_data(export_list) {
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer;
                var index = layer.load(1);
                var data_list = export_list;
                $.ajax({
                    url:'{{ url_for('main_api.export_data_to_csv') }}',
                    type:'POST',
                    data:{'data': JSON.stringify(data_list)},
                    async:true,
                    success:function (res) {
                        if(res.code == '200'){
                            layer.msg('全部数据导出成功');
                            layer.close(index);
                            window.location.href='/api/download?output_path=./app/static&output_name=statistics_csv_files.zip'
                        }
                        else{
                            layer.msg(res.msg);
                            layer.close(index);
                        }
                    },
                    error: function f(res) {
                        alert("请求失败！状态码：" + res.status);
                        layer.close(index);
                    }
                })
            })

        }

        function export_statistics() {
            layui.use(['layer', 'transfer', 'jquery'], function () {
                var layer = layui.layer;
                var transfer = layui.transfer;
                $ = layui.jquery;
                layer.open({
                    type:1,
                    title:"导出统计数据",
                    btn: ['导出', '取消'],
                    area: ['600px', '600px'],
                    shade: 0,
                    content: $("#export_data"),
                    yes:function (ind) {
                        var export_list = transfer.getData('export_area');
                        export_data(export_list);
                        layer.close(ind);
                    },
                    btn2:function () {
                        $('#export_data').css('display', 'none');
                    }
                })
            })
        }
        
        function show_graph() {
            for(var i = 0;i < tab_status.length;i++){
                if(tab_status[i]['status'] === '0'){
                    $('#' + tab_status[i]['index']).css('display', 'none');
                }
                if(tab_status[i]['status'] === '1'){
                    $('#' + tab_status[i]['index']).css('display', 'block');
                }
            }
        }

        function change_status(id) {
             for(var i = 0;i < tab_status.length;i++){
               if(tab_status[i]['index'] == id){
                   tab_status[i]['status'] = '1';
                   var next = tab_status[i]['next'];
                   tab_status[next]['status'] = '0';
               }
             }
        }

        function load_bar_graph(data, id) {
            // 基于准备好的dom，初始化echarts实例

            myChart = echarts.init(document.getElementById(id), null, {renderer: 'svg'});

            change_status(id);

            var value = [];
            var index = [];
            for (var i = 0; i < data.length; i++) {
                value.push(data[i]['number']);
                index.push(data[i]['index']);
            }

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: ''
                },
                legend: {
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                    orient: 'horizontal',
                    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    x: 'center',
                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    y: 'top',
                    itemWidth: 24,   // 设置图例图形的宽
                    itemHeight: 18,  // 设置图例图形的高
                    textStyle: {
                      color: '#666'  // 图例文字颜色
                    },
                    // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                    itemGap: 10,
                    data: index
                },
                tooltip: {},
                xAxis: {
                    data: index,
                },
                yAxis: {
                },
                toolbox: { //可视化的工具箱
                    show: true,
                    feature: {
                        dataView: { //数据视图
                            show: true
                        },
                        magicType: {//动态类型切换
                            type: ['bar', 'line']
                        }
                    }
                },
                series: [{
                    type: 'bar',
                    data: value,
                    itemStyle: {
                            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                            emphasis: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(30, 144, 255，0.5)'
                            },
                             normal: {
                                    //这里是重点
                                    color: function(params) {
                                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                        var index;
                                        //给大于颜色数量的柱体添加循环颜色的判断
                                        if (params.dataIndex >= colorList.length) {
                                           index = params.dataIndex - colorList.length;
                                           return colorList[index];
                                        }
                                        return colorList[params.dataIndex];
                                    }
                                }
                        },
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }]
            };

            if(id == 'dp_01' ||  id == 'dp_11' ){
                option['series'][0]['name'] = '部门人数';
                option['xAxis']['name'] = '部门';
                option['yAxis']['name'] = '人数';
            }
            if(id == 'po_01' ||  id == 'po_11' ){
                option['series'][0]['name'] = '订阅人数';
                option['xAxis']['name'] = '刊物';
                option['yAxis']['name'] = '订阅人数';
            }
            if(id == 'od_01'){
                option['series'][0]['name'] = '刊物种类数';
                option['xAxis']['name'] = '部门';
                option['yAxis']['name'] = '刊物种类数';
            }
            if(id == 'do_01'){
                option['series'][0]['name'] = '部门数';
                option['xAxis']['name'] = '刊物';
                option['yAxis']['name'] = '部门数';
            }

            show_graph();
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }

        function load_bar(id) {
            if(id == 'dp_01' ||  id == 'dp_11' ){
                url = '{{ url_for('main_api.get_department_person_statistics') }}';
            }
            if(id == 'po_01' ||  id == 'po_11' ){
                url = '{{ url_for('main_api.get_person_order_statistics') }}';
            }
            if(id == 'od_01'){
                url = '{{ url_for('main_api.get_order_department_statistics') }}';
            }
            if(id == 'do_01'){
                url = '{{ url_for('main_api.get_department_order_statistics') }}';
            }
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer;
                var data;
                var index = layer.load(1);
                $ = layui.jquery;
                $.ajax({
                    url: url,
                    type: 'GET',
                    async: true,
                    success: function (res) {
                        if (res.code == '200') {
                            data = res.data;
                            load_bar_graph(data, id);
                            layer.close(index);
                        } else {
                            layer.msg(res.msg);
                            layer.close(index);
                        }
                    },
                    error: function f(res) {
                        alert("请求失败！状态码：" + res.status);
                        layer.close(index);
                    }
                })
            })
        }

        function load_pie(id, mode) {
            if(id == 'dp' || id == 'dp_00' ||  id == 'dp_10' ){
                url = '{{ url_for('main_api.get_department_person_statistics') }}';
            }
            if(id == 'po' || id == 'po_00' ||  id == 'po_10' ){
                url = '{{ url_for('main_api.get_person_order_statistics') }}';
            }
            if(id == 'od' || id == 'od_00'){
                url = '{{ url_for('main_api.get_order_department_statistics') }}';
            }
            if(id == 'do' || id == 'do_00'){
                url = '{{ url_for('main_api.get_department_order_statistics') }}';
            }
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer;
                var data;
                var index = layer.load(1);
                $ = layui.jquery;
                $.ajax({
                    url: url,
                    type: 'GET',
                    async: true,
                    success: function (res) {
                        if (res.code == '200') {
                            data = res.data;
                            if (mode == 0) {
                                if(id == 'od' || id == 'od_00' || id == 'do_00'){
                                    load_pie_graph(data, id + '_00');
                                }
                                else{
                                    load_pie_graph(data, id + '_00');
                                    load_pie_graph(data, id + '_10');
                                }
                            }else {
                                load_pie_graph(data, id);
                            }
                            layer.close(index);
                        } else {
                            layer.msg(res.msg);
                            layer.close(index);
                        }
                    },
                    error: function f(res) {
                        alert("请求失败！状态码：" + res.status);
                        layer.close(index);
                    }
                })
            })
        }

        function load_pie_graph(data, id) {

            myChart = echarts.init(document.getElementById(id), null, {renderer: 'svg'});

            change_status(id);

            var infos = [];
            var title = [];
            for (var i = 0; i < data.length; i++) {
                var info = {value: data[i]['number'], name: data[i]['index']};
                title.push(data[i]['index']);
                infos.push(info);
            }


            show_graph();

            option = {
                legend: {
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                    orient: 'vertical',
                    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    x: 'left',
                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    y: 'center',
                    itemWidth: 24,   // 设置图例图形的宽
                    itemHeight: 18,  // 设置图例图形的高
                    textStyle: {
                      color: '#666'  // 图例文字颜色
                    },
                    // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                    itemGap: 10,
                    data: title
                },
                toolbox: { //可视化的工具箱
                    show: true,
                    feature: {
                        dataView: { //数据视图
                            show: true
                        },
                        magicType: {//动态类型切换
                            type: ['bar', 'line']
                        }
                    }
                },
                series: [
                    {
                        name: '部门人数',
                        type: 'pie',
                        radius: '55%',// 设置图表类型为饼图
                        tooltip: {},// 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data: infos,
                        itemStyle: {
                            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                            emphasis: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(30, 144, 255，0.5)'
                            }
                        },
                      // 设置值域的那指向线
                      labelLine: {
                            normal: {
                              show: true   // show设置线是否显示，默认为true，可选值：true ¦ false
                            }
                      },
                      // 设置值域的标签
                      label: {
                            normal: {
                              position: 'outer',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                              // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                              // {a}指series.name  {b}指series.data的name
                              // {c}指series.data的value  {d}%指这一部分占总数的百分比
                            }
                      }
                    }
                ]
            }

            if(id == 'od_00'){
                option['series'][0]['label']['normal']['formatter'] = '{b} : {c}种刊物';
            }
            if(id == 'dp_00' || id == 'dp_10' || id == 'po_00' || id == 'po_10'){
                option['series'][0]['label']['normal']['formatter'] = '{b} : {c}人';
            }
            if(id == 'do_00'){
                option['series'][0]['label']['normal']['formatter'] = '{b} : {c}个部门';
            }

            // 指定图表的配置项和数据
            myChart.setOption(option);
        }

    </script>
{% endblock %}